
import React, { useEffect, useState } from 'react';
import { Button, TabBar, NavBar, TabBarItemProps, Footer } from 'antd-mobile';
import { CloseCircleOutline, GiftOutline, HandPayCircleOutline, MessageOutline, SetOutline, UndoOutline, UserCircleOutline } from 'antd-mobile-icons';
import { useLocation, useNavigate } from 'react-router-dom'
import { runCommand, useSetState, webAddListener } from './util';
import { getConfig } from '../tokens/core';
import { getToken } from '../tokens/const';
export const Layout: React.FC<React.PropsWithChildren & { hasBack?: boolean }> = ({ children, hasBack }) => {
    const location = useLocation()
    const config = getConfig();
    const [token, setToken] = useState(getToken())
    const { data: state, setData: setState } = useSetState<any>({
        activeKey: location.pathname
    });
    const navigate = useNavigate()
    const [tabs] = useState<(TabBarItemProps & { key: string })[]>([
        { key: '/autojs/core/mobile/money', icon: <GiftOutline />, title: '收益' },
        { key: '/autojs/core/mobile/sms', icon: <MessageOutline />, title: '接码' },
        { key: '/autojs/core/mobile/setting', icon: <SetOutline />, title: '设置' },
        { key: '/autojs/core/mobile/mine', icon: <UserCircleOutline />, title: '我的' },
    ]);
    const changeTabBar = (e) => {
        setState({
            activeKey: e
        })
        navigate(`${e}`, { replace: true })
    }
    const clearCache = () => {
        setToken(undefined)
        config.clear();
        runCommand(`COMMAND_CLEAR_CACHE`)
    }
    useEffect(() => {
        const token = getToken();
        setToken(token)
        webAddListener(`COMMAND_LOGIN_SUCCESS`, () => {
            const token = getToken();
            setToken(token)
        })
    }, [])
    const login = () => {
        navigate('/autojs/core/mobile/login', { state: location.pathname })
        runCommand(`COMMAND_EXIT`)
    }
    const refresh = () => {
        window.location.reload()
    }
    const renderRight = () => {
        if (token) {
            return <Button type='button' fill='none' onClick={e => clearCache()}><span className='c-ffffff' >
                <CloseCircleOutline />
            </span></Button>
        } else {
            <Button type='button' fill='none' onClick={e => login()}><span className='c-ffffff' >登录</span></Button>
        }
    }
    const renderRefresh = () => {
        return <Button type='button' fill='none' onClick={e => refresh()}>
            <span className='c-ffffff' > <UndoOutline /></span>
        </Button>
    }
    return <div className="flex flex-col h-full">
        <NavBar
            back={!!hasBack ? '返回' : undefined}
            backArrow={!!hasBack}
            onBack={() => navigate(-1)}
            className='bg-2980b9 c-ffffff text-16px'
            // left={<Button type='button' fill='none' onClick={e => closeApp()}><span className='c-ffffff' >停止</span></Button>}
            right={<>{renderRight()}{renderRefresh()}</>}>
            老哥助手1.0
        </NavBar>
        <div className='flex-1' style={{ overflowY: 'auto', position: 'relative' }}>
            <div style={{ position: 'absolute', top: '0px', left: '0px', bottom: '0px', right: '0px' }}>
                {children}
            </div>
        </div>
        <TabBar onChange={e => changeTabBar(e)} activeKey={state.activeKey}>
            {tabs.map(item => (
                <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
        </TabBar>
    </div>
}

